<template>
  <el-dialog :visible.sync="dialogVisible" width="50%" @close="close">
    <div slot="title">{{ info.modalType === 1 ? "新增" : "编辑" }}</div>
    <el-form
      hide-required-asterisk
      :model="refFormData"
      label-width="100px"
      :rules="rules"
      class="label-row"
      ref="refForm"
    >
      <el-form-item prop="name" label="名称">
        <el-input
          clearable
          size="small"
          autofocus
          v-model="refFormData.name"
          placeholder="名称"
        ></el-input>
      </el-form-item>

      <el-form-item prop="label" label="产品标签">
        <el-input
          clearable
          size="small"
          autofocus
          v-model="refFormData.label"
          placeholder="产品标签"
        ></el-input>
      </el-form-item>

      <el-form-item prop="num" label="数量">
        <el-input
          clearable
          size="small"
          autofocus
          v-model.number="refFormData.num"
          placeholder="数量"
        ></el-input>
      </el-form-item>
      <el-form-item prop="product_id" label="产品id">
        <el-input
          clearable
          size="small"
          autofocus
          v-model.number="refFormData.product_id"
          placeholder="产品id"
        ></el-input>
      </el-form-item>
      <el-form-item prop="priority" label="优先级">
        <el-input
          clearable
          size="small"
          autofocus
          v-model.number="refFormData.priority"
          placeholder="优先级"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="warning" @click="close()">取消</el-button>
      <el-button type="success" @click="submit('refForm')">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "dialogBox",
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
    compose_id: "",
  },
  data() {
    return {
      dialogVisible: true,
      refFormData: {},
      rules: {
        name: [
          { required: true, message: "", trigger: "blur" },
          { min: 1, max: 30, message: "", trigger: "blur" },
        ],
      },
      list: [],
    };
  },
  mounted() {
    this.refFormData = {
      ...this.info,
    };
    console.log(this.refFormData);
  },
  methods: {
    /**
     * @Desc 数据提交
     * */
    async submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;
        const params = {
          ...this.refFormData,
          compose_id: +this.compose_id,
        };
        console.log(params);
        const { data } = await this.$api.compose.composeProductOperate({
          [this.info.modalType === 1 ? "create" : "update"]: params,
        });
        this.__globalHandleResponseMixin(
          { ...data, _msg_: "数据不合法" },
          () => {
            this.$message.success("保存成功");
            this.$emit("getList");
            this.close();
          }
        );
      });
    },

    /**
     * @Desc 关闭
     * @params {String}
     * @return {Object}
     * */
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped></style>
